<template>
  <div class="lists-item">
    <div class="order_all">
      我的订单 
      <a href="javascript:;" class="fr moreOrder">查看更多订单<van-icon name="arrow" /></a>
    </div>
    <ul class="function-list order-list">
      <li class="function-items">
        <a href="javascript:;" class="order-new">
          <van-icon name="pending-payment" />
          <span>待付款</span>
        </a>
        <a href="javascript:;" class="order-pay">
          <van-icon name="free-postage" />
          <span>待发货</span>
        </a>
        <a href="javascript:;" class="order-send">
          <van-icon name="logistics" />
          <span>待收货</span>
        </a>
        <a href="javascript:;" class="order-noeval">
          <van-icon name="records" />
          <span>待评价</span>
        </a>
        <a href="javascript:;" class="refund">
          <van-icon name="after-sale" />
          <span>退款/售后</span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from 'vue';
import { Icon } from 'vant';

Vue.use(Icon);
export default {


};
</script>


<style lang="stylus" scoped>
.lists-item
  background #fff
  margin 0.1rem 0.1rem
  border-radius 0.06rem
  .order_all
    padding 0.13rem 0.15rem
    font-size 0.16rem
    border-bottom 0.01rem solid #eee
    a 
      float right 
      font-size 0.14rem
      color #999
.order-list
  padding-top 0.16rem
  padding-bottom  0.2rem
  .function-items
    display flex
    a 
      text-align center
      width 20%
      display block
      .van-icon
        font-size 0.3rem
        color #EE514B
      span 
        display block
        color #333        
</style>